import { createApp } from "vue";
import axios from "@/plugins/axios";
import App from "@/App.vue";
import router from "@/router";
import store from "@/store";
import installElementPlus from "@/plugins/element";
import elementIcon from "@/plugins/svgicon";
import permission from "@/plugins/permission";
import mock from "@/plugins/mock";
import directives from "@/directives";
import veBaseComponents from "@/components/veBaseComponents";
import { ElMessage } from "element-plus";
// import JsonViewer from 'vue-json-viewer';

import "normalize.css/normalize.css";
import "nprogress/nprogress.css";
import "@/styles/common.scss";
import "@/styles/global.scss";
const app = createApp(App);

// 全局错误处理
app.config.errorHandler = (err, vm, info) => {
    console.error("Vue Error:", err);
    console.error("Error Info:", info);

    // 只在开发环境下显示详细错误
    if (process.env.NODE_ENV === "development") {
        console.error("Component:", vm);
    }

    // 显示用户友好的错误信息
    ElMessage.error("系统出现异常，请稍后重试");
};

// 全局未捕获的Promise错误处理
window.addEventListener("unhandledrejection", (event) => {
    console.error("Unhandled Promise Rejection:", event.reason);
    // 防止默认的错误处理
    event.preventDefault();

    // 显示用户友好的错误信息
    ElMessage.error("网络连接异常，请稍后重试");
});

// 全局JavaScript错误处理
window.addEventListener("error", (event) => {
    console.error("Global Error:", event.error);

    // 显示用户友好的错误信息
    ElMessage.error("系统出现异常，请稍后重试");
});

app.use(mock)
    .use(elementIcon)
    .use(veBaseComponents)
    .use(store)
    .use(router)
    .use(installElementPlus)
    .use(axios, { router, store, opt: "VE_API" })
    .use(permission, { router, store })
    .use(directives, { router, store })
    .mount("#app");
